<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="../common/header.jsp" %>
<section class="container">
    <div class="content-wrap">
        <div class="content">
            <%--轮播图 start--%>
            <div id="focusslide" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#focusslide" data-slide-to="0" class="active"></li>
                    <li data-target="#focusslide" data-slide-to="1"></li>
                    <li data-target="#focusslide" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <c:forEach items="${slideAdList}" var="slide" varStatus="status">
                        <div <c:if test="${status.index == 0}" >class="item active"</c:if>
                             <c:if test="${status.index > 0}" >class="item"</c:if>
                        >
                            <a href="${slide.link}" target="_blank" title="${slide.name}">
                                <img src="${slide.path}" alt="${slide.name}" class="img-responsive">
                            </a>
                        </div>
                    </c:forEach>
                </div>

                <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">上一个</span>
                </a>

                <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">下一个</span>
                </a>
            </div>
            <%--轮播图 end--%>

            <div class="title">
                <%--<h3 style ="color: #60a5a5;">最新发布</h3>--%>
            </div>
            <c:forEach items="${newsList}" var="news">
                <article class="excerpt excerpt-1" style="">
                    <div style="clear: both"></div>
                    <header style=" margin: 12px 0px;">
                        <a class="cat" href="../category_list?cid=${news.categoryId }"
                           title="${news.newsCategory.name }">${news.newsCategory.name }
                            <i></i>
                        </a>
                        <h2>
                            <a href="../detail?id=${news.id }" title="${news.title }"
                               target="_blank">${news.title }</a>
                        </h2>
                    </header>
                    <a class="focus" href="../detail?id=${news.id }" title="${news.title }" target="_blank">
                        <c:if test="${news.photo!=null}">
                            <img  class="thumb" data-original="${news.photo }" src="${news.photo }" alt="${news.title }"
                                style="display: inline;">
                        </c:if>
                    </a>
                    <p class="note">${news.abstrs }</p>
                    <p class="meta">
                        <time class="time"><i class="glyphicon glyphicon-time"></i>
                            <fmt:formatDate value="${news.createTime }" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </time>
                        <span class="views">
                            <i class="glyphicon glyphicon-eye-open"></i> ${news.viewNumber }
                        </span>
                        <a class="comment" href="../detail?id=${news.id }#comment" title="评论" target="_blank">
                            <i class="glyphicon glyphicon-comment"></i>${news.commentNumber }
                        </a>
                        <span class="more" style=""><a href="../detail?id=${news.id }" title="${news.title }" style="float: right;background-color: #3399CC;color: white;padding: 5px;">阅读详情</a></span>
                    </p>
                </article>
            </c:forEach>
            <div class="ias_trigger"><a href="javascript:;" id="load-more-btn">查看更多</a></div>
        </div>
    </div>
    <%@ include file="../common/sidebar.jsp" %>
</section>
<%@ include file="../common/footer.jsp" %>
<script>
    /*从第二页开始加载更多*/
    var page = 2;
    $(document).ready(function(){
        $("#load-more-btn").click(function(){
            if($("#load-more-btn").attr('data-key') == 'all'){return;}
            $("#load-more-btn").text('查看更多');
            $("#load-more-btn").css({"color":"green"});
            $.ajax({
                url:'../get_index_list',
                type:'post',
                data:{rows:10,page:page++},
                dataType:'json',
                success:function(data){
                    if(data.type == 'success'){
                        $("#load-more-btn").text('查看更多!');
                        var newsList = data.newsList;
                        if(newsList.length == 0){
                            $("#load-more-btn").text('没有更多了!');
                            $("#load-more-btn").css({"color":"red"});
                            $("#load-more-btn").attr('data-key','all');
                        }
                        var html = '';
                        for(var i=0;i<newsList.length;i++){
                            if (newsList[i].photo!=null){
                                var article = '<article class="excerpt excerpt-1" style="">';
                                article +='<header><a class="cat" href="../category_list?cid='+newsList[i].categoryId+'" title="'+newsList[i].newsCategory.name+'" >'+newsList[i].newsCategory.name+'<i></i></a>';
                                article +='<h2><a href="../detail?id='+newsList[i].id+'" title="'+newsList[i].title+'" target="_blank" >'+newsList[i].title+'</a></h2></header>';
                                article +='<a class="focus" href="../detail?id='+newsList[i].id+'" title="'+newsList[i].title+'" target="_blank" >';
                                article +='<img class="thumb" data-original="'+newsList[i].photo+'" src="'+newsList[i].photo+'" alt="'+newsList[i].title+'"  style="display: inline;"></a>';
                                article +='<p class="note">'+newsList[i].abstrs+'</p>';
                                article +='<p class="meta"><time class="time"><i class="glyphicon glyphicon-time"></i>'+format(newsList[i].createTime)+'</time>';
                                article +='<span class="views"><i class="glyphicon glyphicon-eye-open"></i> '+newsList[i].viewNumber+'</span>';
                                article +='<a class="comment" href="../detail?id='+newsList[i].id+'#comment" title="评论" target="_blank" ><i class="glyphicon glyphicon-comment"></i>'+newsList[i].commentNumber+'</a>';
                                article +='<span class="more" style=""><a href="../detail?id='+newsList[i].id+'" title="'+newsList[i].title+'" style="float: right;background-color: #3399CC;color: white;padding: 5px;">阅读详情</a></span></p>';
                                article +='</article>';
                                html += article;
                            }else {
                                var article = '<article class="excerpt excerpt-1" style="">';
                                article +='<header><a class="cat" href="../category_list?cid='+newsList[i].categoryId+'" title="'+newsList[i].newsCategory.name+'" >'+newsList[i].newsCategory.name+'<i></i></a>';
                                article +='<h2><a href="../detail?id='+newsList[i].id+'" title="'+newsList[i].title+'" target="_blank" >'+newsList[i].title+'</a></h2></header>';
                                article +='<a class="focus" href="../detail?id='+newsList[i].id+'" title="'+newsList[i].title+'" target="_blank" </a>';
                                article +='<p class="note">'+newsList[i].abstrs+'</p>';
                                article +='<p class="meta"><time class="time"><i class="glyphicon glyphicon-time"></i>'+format(newsList[i].createTime)+'</time>';
                                article +='<span class="views"><i class="glyphicon glyphicon-eye-open"></i> '+newsList[i].viewNumber+'</span>';
                                article +='<a class="comment" href="../detail?id='+newsList[i].id+'#comment" title="评论" target="_blank" ><i class="glyphicon glyphicon-comment"></i>'+newsList[i].commentNumber+'</a>';
                                article +='<span class="more" style=""><a href="../detail?id='+newsList[i].id+'" title="'+newsList[i].title+'" style="float: right;background-color: #3399CC;color: white;padding: 5px;">阅读详情</a></span></p>';
                                article +='</article>';
                                html += article;
                            }
                        }
                        $("#load-more-btn").parent("div").before(html);
                    }
                }
            });
        });
    });
</script>